<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
</head>
<body>
<form class="layui-form" action="" lay-filter="form-filter">
    <div class="mainBox">
        <div class="main-container">
            <div class="layui-form-item layui-hide">
                <label class="layui-form-label required">ID</label>
                <div class="layui-input-block">
                    <input type="text" name="id" class="layui-input" disabled>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">上级菜单</label>
                <div class="layui-input-block">
                    <input type="hidden" name="parentId" lay-filter="input-parentId-filter" class="layui-input">
                </div>
            </div>
            <div id="menuContent" class="menuContent" style="display:none; position: absolute;">
                <ul id="treeDemo" class="ztree" style="margin-top:0; width:180px; height: 300px;"></ul>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">菜单类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="type" lay-filter="radio-type-filter">
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label required">目录图标</label>
                <div class="layui-input-inline">
                    <input type="text" name="icon" id="iconPicker" value="layui-icon-face-smile" lay-filter="iconPicker" class="hide">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">菜单名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="title" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label required">排序号</label>
                <div class="layui-input-inline">
                    <input type="number" name="seq" lay-verify="required" value="0" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">权限字符</label>
                <div class="layui-input-block">
                    <input type="text" name="permission" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">页面链接</label>
                <div class="layui-input-block">
                    <input type="text" name="url" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">菜单打开方式</label>
                <div class="layui-input-block">
                    <input type="radio" name="openType">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">菜单状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="disabled">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea name="remark" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="submit-filter">
                <i class="layui-icon layui-icon-ok"></i>提交
            </button>
            <button type="reset" class="pear-btn pear-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>重置
            </button>
        </div>
    </div>
</form>
<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script>
    layui.use(['form', 'jquery', 'vtlForm', 'iconPicker', 'zTree'], function() {
        let form = layui.form;
        let $ = layui.jquery;
        let vtlForm = layui.vtlForm;
        let iconPicker = layui.iconPicker;
        let zTree = layui.zTree;
        let url = layui.url();
        let id = url.search.id;

        form.on('radio(radio-type-filter)', function(data){
            var elem = data.elem; // 获得 radio 原始 DOM 对象
            var checked = elem.checked; // 获得 radio 选中状态
            var value = elem.value; // 获得 radio 值
            var othis = data.othis; // 获得 radio 元素被替换后的 jQuery 对象
            window.setVisibleByMenuType(elem.value);
        });

        form.on('submit(submit-filter)', function(data) {
            if(data.field.icon && data.field.icon.indexOf('layui-icon ') == -1) {
                data.field.icon = 'layui-icon ' + data.field.icon;
            }
            if(id) {
                $.put('/vtl-menu', data.field, function(result) {
                    if (result.code == 200) {
                        $.vtl.closeLayer();
                        parent.refresh();
                    }
                });
            } else {
                $.post('/vtl-menu', data.field, function(result) {
                    if (result.code == 200) {
                        $.vtl.closeLayer();
                        parent.refresh();
                    }
                });
            }

            return false;
        });

        window.initIconPicker = function() {
            iconPicker.render({
                elem: '#iconPicker',
                type: 'fontClass',
                search: true,
                page: false,
                limit: 16,
                click: function(data) {
                   //console.log(data);
                },
                success: function(d) {
                    //console.log(d);
                }
            });
        }

        window.setVisibleByMenuType = function() {
            let type = $('form input:radio[name=type]:checked').val() || 'BTN';

            let $icon = $('form input:text[name=icon]');
            let $permission = $('form input:text[name=permission]');
            let $url = $('form input:text[name=url]');
            let $openType = $('form input:radio[name=openType]');
            switch (type) {
                  case 'DIR':
                      $icon.attr('lay-verify', 'required').parents('div .layui-form-item').show();
                      $permission.removeAttr('lay-verify').parents('div .layui-form-item').hide();
                      $url.removeAttr('lay-verify').parents('div .layui-form-item').hide();
                      $openType.parents('div .layui-form-item').hide();
                      break;
                  case 'MENU':
                      $icon.removeAttr('lay-verify').parents('div .layui-form-item').hide();
                      $permission.attr('lay-verify', 'required').parents('div .layui-form-item').show();
                      $url.attr('lay-verify', 'required').parents('div .layui-form-item').show();
                      $openType.parents('div .layui-form-item').show();
                      break;
                  case 'BTN':
                  case 'OTHER':
                      $icon.removeAttr('lay-verify').parents('div .layui-form-item').hide();
                      $permission.attr('lay-verify', 'required').parents('div .layui-form-item').show();
                      $url.removeAttr('lay-verify').parents('div .layui-form-item').hide();
                      $openType.parents('div .layui-form-item').hide();
                      break;
                  default:
                      $icon.removeAttr('lay-verify').parents('div .layui-form-item').hide();
                      $permission.attr('lay-verify', 'required').parents('div .layui-form-item').show();
                      $url.removeAttr('lay-verify').parents('div .layui-form-item').hide();
                      $openType.parents('div .layui-form-item').hide();
                      break;
                }
        }

        window.initParentIdSelector = function() {
            let data = [];
            $.sync('get', '/vtl-menu/treeTableDataList', function(result){
                data = $.vtl.tree(result, '0');
            });

            let config = { data: data, radio: true, clickClose: true, tree: { show: true, expandedKeys: false }, prop: {name: 'title'} };
            if(id) {
                config = $.extend(true, config, { disabled: true, model: {label: {block: {showIcon: false}}} });
            }
            vtlForm.initXmSelect('form input:hidden[name=parentId]', config);
        }

        window.init = function(id) {
            vtlForm.initRadioByDict('form input:radio[name=type]', 'vtl_menu_type');
            vtlForm.initRadioByDict('form input:radio[name=openType]', 'vtl_menu_open_type');
            vtlForm.initRadioByDict('form input:radio[name=disabled]', 'vtl_disabled');
            if(id) {
                $.sync('get', '/vtl-menu/' + id, function(result) { form.val("form-filter", result); });
            }
            window.setVisibleByMenuType();
            window.initIconPicker();
             window.initParentIdSelector();
        }

        window.init(id);
    })
</script>
</body>
</html>
